<!DOCTYPE html PUBLIC>
<html>
<meta charset="utf-8" />
<title>跟随鼠标移动（大图展示）</title>
<style type="text/css">
    html,
    body {
        overflow: hidden;
    }

    body,
    div,
    ul,
    li {
        margin: 0;
        padding: 0;
    }

    #box ul {
        width: 768px;
        height: 172px;
        list-style-type: none;
        margin: 10px auto;
    }

    #box li {
        width: 170px;
        height: 170px;
        cursor: pointer;
        display: inline-block;
        border: 1px solid #ddd;
        margin: 0 5px;
    }

    #box li.active {
        border: 1px solid #a10000;
    }

    #box li img {
        width: 170px;
        height: 170px;
        vertical-align: top;
    }

    #big {
        position: absolute;
        width: 400px;
        height: 400px;
        border: 2px solid #ddd;
        display: none;
    }

    #big div {
        position: absolute;
        top: 0;
        left: 0;
        width: 400px;
        height: 400px;
        opacity: 0.5;
        filter: alpha(opacity=50);

    }
</style>
<script type="text/javascript">
    window.onload = function () {
       var box = document.getElementById("box");
       var list = box.children[0].children;
       var bigbox = document.getElementById("big");

    // 给最外层级添加事件，li委托给最外层处理，当鼠标移入的目标为img时，执行放大操作
        box.addEventListener("mouseover",function(e){
      
             e = e|| event;
          
            if(e.target.nodeName == "IMG"){
             
                // 当鼠标移入图片时，新建img标签
                var oImg = document.createElement("img");
                // 获取图片的路径，并加上big，存放放大后的图片
                var str = e.target.src;
              
                str = str.substring(str.length-15,str.length-4);
            
                oImg.src = str +"_big.jpg";
                // 替换掉原来的元素
                bigbox.replaceChild(oImg,bigbox.children[0]);
                bigbox.style.display = "block";
            

            }
        })
        // 移出也委托给最外层处理
        box.addEventListener("mousemove",function(e){
            e = e || event;
            // 当移动到右边界时，转向左边
            if(e.clientX >(window.innerWidth - bigbox.offsetWidth -10)){
                bigbox.style.left = e.clientX - bigbox.offsetWidth+"px";
            }
            else{
                bigbox.style.left = e.clientX +10 +"px";    // 与当前鼠标位置保持一定距离
            }
            bigbox.style.top = e.clientY +10 +"px";    // 与当前鼠标位置保持一定距离

        })
        box.addEventListener("mouseleave",function(e){
            bigbox.style.display = "none";
        } )
        

    };
</script>
</head>

<body>
    <div id="box">
        <ul>
            <li class=""><img src="img/shirt_1.jpg"></li>
            <li class=""><img src="img/shirt_2.jpg"></li>
            <li class=""><img src="img/shirt_3.jpg"></li>
            <li class=""><img src="img/shirt_4.jpg"></li>
        </ul>
    </div>
    <div id="big" style="display: none; top: 190px; left: 812px;">
        <div></div>
    </div>

</body>

</html>